<template>
	<view>
		<view class="my_header">
			<!-- 左侧头像及信息 -->
			<view class="my_left">
				<!-- 头像 -->
				<view class="my_pic">
					<image src="https://img.js.design/assets/img/641d6df2cece21d6b618eb91.png" mode=""></image>
				</view>
				<!-- 信息 -->
				<view class="my_info">
					<view class="my_name">奇奇</view>
					<view class="qianming">坚持再坚持</view>
				</view>
			</view>
			<!-- 右侧设置 -->
			<!-- <view class="my_set">
				<img src="https://s1.ax1x.com/2023/04/19/p9FIZvT.png" alt="">
			</view> -->
		</view>
		<!-- 我的服务 -->
		<view class="my_fuwu">
			<view class="fuwu_title">我的服务</view>
			<!-- 服务类型 -->
			<view class="fuwu_list">
				<!-- 收藏 -->
				<view class="fuwu_item">
					<view class="item_pic">
						<image src="https://img.js.design/assets/img/641d78e27c814c19c7b0a94a.png" mode=""></image>
					</view>
					<view class="fuwu_name">收藏</view>
				</view>
				<!-- 菜谱 -->
				<view class="fuwu_item">
					<view class="item_pic cp">
						<image src="https://img.js.design/assets/img/641d7951cb964223d1b998d0.png" mode=""></image>
					</view>
					<view class="fuwu_name">菜谱</view>
				</view>
				<!-- 碳水计算 -->
				<view class="fuwu_item" @click="goTanShui">
					<view class="item_pic ts">
						<image src="https://img.js.design/assets/img/641ffd94f92e222c05a06c62.png" mode=""></image>
					</view>
					<view class="fuwu_name">碳水计算</view>
				</view>
				<!-- 个人信息 -->
				<view class="fuwu_item" @click="goInfo">
					<view class="item_pic gr">
						<image src="https://img.js.design/assets/img/641d7a0a485748da03645751.png" mode=""></image>
					</view>
					<view class="fuwu_name">个人信息</view>
				</view>
			</view>
		</view>
		<!-- 健康方案等 -->
		<view class="my_box">
			<view class="box_item" v-for="item in boxList" :key="item.id" @click="handle(item.url)">
				<!-- 左侧 -->
				<view class="boxItem_left">
					<image :src="item.picUrl" mode=""></image>
					<text>{{ item.text }}</text>
				</view>
				<!-- 右侧 -->
				<view class="boxItem_right">
					<image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxList: [{
						id: 1,
						text: '数据收集',
						picUrl: 'https://s1.ax1x.com/2023/04/19/p9F7xij.png',
						url: '/subpkg/wode/healthPlan/healthPlan'
					},
					{
						id: 2,
						text: '饮食方案',
						picUrl: 'https://s1.ax1x.com/2023/04/19/p9FbeHS.png'
					},
					{
						id: 3,
						text: '本周食谱',
						picUrl: 'https://s1.ax1x.com/2023/04/19/p9FbDjx.png'
					},
					{
						id: 4,
						text: '数据统计',
						picUrl: 'https://s1.ax1x.com/2023/04/19/p9Fb6HO.png',
						url: '/subpkg/wode/dataStatistics/dataStatistics'
					}
				]
			}
		},
		methods: {
			// 跳转到个人信息
			goInfo() {
				uni.navigateTo({
					url: '../../subpkg/wode/info/info'
				})
			},
			// 跳转到碳水计算
			goTanShui() {
				uni.navigateTo({
					url: '../../subpkg/wode/tanshui/tanshui'
				})
			},
			// 
			handle(url) {
				if (!url) {
					uni.showToast({
						title: "正在开发中",
						icon: "none"
					})
				}
        uni.navigateTo({
          url
        })
			},
			// 获取到登录的信息-调用后端接口
			getUserInfo() {}
		},
		onShow() {
			// 如果登录 页面渲染-调用方法
			this.getUserInfo();
		}
	}
</script>

<style lang="scss">
	.my_header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		height: 386rpx;
		padding-top: 88rpx;
		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
		background: rgba(245, 195, 159, 1);
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.25);

		// 左侧头像及信息
		.my_left {
			display: flex;
			align-items: center;
			width: 432rpx;

			// 头像
			.my_pic {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				margin: 0 22rpx 0 34rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// 信息
			.my_info {
				font-weight: 400;

				.my_name {
					font-size: 48rpx;
					color: rgba(62, 34, 22, 1);
				}

				.qianming {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: rgba(140, 113, 92, 1);
				}
			}
		}

		// 右侧设置
		// .my_set {
		// 	width: 60rpx;
		// 	height: 60rpx;
		// 	margin-right: 34rpx;

		// 	image {
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// }
	}

	// 我的服务
	.my_fuwu {
		font-size: 40rpx;
		font-weight: 400;
		margin-top: 58rpx;
		padding-left: 64rpx;
		padding-right: 64rpx;
		color: rgba(62, 34, 22, 1);

		// 服务列表
		.fuwu_list {
			display: flex;
			justify-content: space-between;
			margin-top: 60rpx;

			.fuwu_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 25%;

				.item_pic {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100rpx;
					height: 100rpx;
					border-radius: 32rpx;
					background: linear-gradient(180deg, rgba(42, 130, 228, 1) 0%, rgba(42, 130, 228, 0.57) 100%);

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.cp {
					background: linear-gradient(180deg, rgba(240, 125, 115, 1) 0%, rgba(254, 194, 175, 1) 100%);
				}

				.ts {
					background: linear-gradient(180deg, rgba(252, 200, 68, 1) 0%, rgba(253, 221, 140, 1) 100%);
				}

				.gr {
					background: linear-gradient(180deg, rgba(0, 218, 159, 1) 0%, rgba(125, 237, 209, 1) 100%);
				}

				.fuwu_name {
					font-size: 32rpx;
					font-weight: 400;
					margin-top: 10rpx;
					color: rgba(166, 166, 166, 1);
				}
			}
		}
	}

	// 健康方案等
	.my_box {
		width: 676rpx;
		height: 526rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		padding: 64rpx 28rpx 28rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.25);

		.box_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 20%;
			border-bottom: 1px solid rgba(240, 240, 240, 1);
			;
			margin-bottom: 20rpx;

			// 左
			.boxItem_left {
				display: flex;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 36rpx;
					font-weight: 400;
					color: rgba(62, 34, 22, 1);
				}
			}

			// 右
			.boxItem_right {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>